<script setup>
import { ref, onMounted, defineProps } from 'vue'

let map = null

const props = defineProps({
    markers: {
        type: Array,
        default: [{
            title: "Example",
            lat: 30.79589,
            lng: 103.90256,
        }]
    }
})

let markerOnMap = []

onMounted(() => {
    map = new AMap.Map('map-container', {
        resizeEnable: true,
        zoom: 15
    })

    refreshMarkers()
})

const addMarker = marker => {
    let m = new AMap.Marker({
        title: m.title,
        position: [m.lng, m.lat]
    })

    map.add(m)
    markerOnMap.push(m)
    map.setFitView()
}

const refreshMarkers = () => {
    markerOnMap.forEach(m => map.remove(m))
    markerOnMap = []

    props.markers.forEach(m => {
        map.add(new AMap.Marker({
            title: m.title,
            position: [m.lng, m.lat]
        }))
        markerOnMap.push(m)
    })

    map.setFitView()
}
</script>

<template>
    <div id="map-container"></div>
</template>

<style scoped>
#map-container {
    width: 100%;
    height: 100%;
}
</style>